<template>
  <div class="member-list">
    <!--    生产管理-出货管理-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div class="flex-row-center-space" style="width: 100%">
          <RadioGroup v-model:value="radioVal" button-style="solid" @change="reload()">
            <RadioButton v-for="item in statusList" :key="item.value" :value="item.value">{{
              item.label
            }}</RadioButton>
          </RadioGroup>
          <Button :type="'primary'" @click="handleAdd">新增发货</Button>
        </div>
      </template>
      <template #status="{ text }">
        <Tag :color="targetStatus(text, statusList).color">
          {{ targetStatus(text, statusList).label }}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              onClick: toDetail.bind(null, record['id'], CHECK),
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>

<script setup lang="ts">
  import { onActivated, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { targetStatus } from '@/utils';
  import mcApi from 'mc-c2b2m-operator-api';
  import { ActionTypeEnum } from '@/enums/commonEnum';
  import { tableColumns, tableFormSchema } from './data';
  import { useTableAction } from '@/hooks/web/useTableAction';
  import { Button, RadioButton, RadioGroup, Tag } from 'ant-design-vue';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import {
    logisticsBillStatusList as statusList,
    LogisticsBillStatusEnum as statusEnum,
  } from '@/enums/productionEnum';

  const { ProductionModule } = mcApi;
  const { LogisticsApi } = ProductionModule;
  const { getActionColumn, handleFetchDateParams } = useTableAction();

  const radioVal = ref<statusEnum>(statusEnum.ALL);
  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    immediate: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: LogisticsApi.getLogisticsBillPage,
    actionColumn: getActionColumn(150),
    beforeFetch: (arg) => {
      handleFetchDateParams(arg);
      arg.status = radioVal.value;
      arg.desc = 'clb.created_time';
    },
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
  });
  onActivated(() => reload());

  const router = useRouter();
  const { ADD, CHECK } = ActionTypeEnum;
  // 跳转详情
  function toDetail(id: string, actionType: ActionTypeEnum) {
    router.push({ path: '/production/logisticsDetail', query: { id, actionType } });
  }
  // 新增发货
  function handleAdd() {
    toDetail('', ADD);
  }
</script>
<script lang="ts">
  export default {
    name: 'Logistics',
  };
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
